<template>
	<view>

		<u-navbar leftText="" title="购物车" leftIcon="" :border-bottom="false" :placeholder="true"
			:safeAreaInsetTop="true" placeholder :fixed='true'>

			<view slot="left" style="display: flex;align-items: center;">
				<!-- <u-icon name="arrow-left" color="#000" size="24" @click='toIndex'></u-icon> -->
				<view class="u-flex u-row-left" style="color: #E51C23;margin-left: 50rpx;" @tap="deleteCartAll()">
					删除
				</view>
			</view>
		</u-navbar>


		<view v-if="cartList.length==0">
			<u-empty text="空空如也~" mode="car" :margin-top="30"></u-empty>

			<!-- 1111 -->
		</view>
		<view class="list" v-else>

			<view>
				<u-checkbox-group @change="selectChange" placement="column" v-model="select">
					<view v-for="(cart,index) in cartList" class="u-flex u-row-left cart">

						<view style="padding-left: 20rpx;">
							<u-checkbox shape="circle" :name="cart.id" activeColor="#ffd774" size='24'>


							</u-checkbox>
						</view>
						<view>
							<view class="u-flex u-row-left" style="font-size: 32rpx;align-items: flex-start;">
								<view style="">
									<image :src="cart.image" style="width: 150rpx;height: 150rpx;" />
								</view>
								<view style="padding: 0 30rpx;" class="item">
									<view style="line-height: 50rpx;">
										<view class="u-flex u-row-between" style="width: 450rpx;">
											<view class="u-line-2 wm_weight_flod text-1">{{cart.storeName}}
											</view>
											<!-- <view @click="deleteCart(cart.id,index)">
												<u-icon name="close" size="36rpx"></u-icon>
											</view> -->
										</view>



										<view
											style="background: rgba(249, 249, 252, 1);border-radius: 21rpx;line-height: 42rpx;display: inline;color: rgba(112, 112, 112, 1);font-size: 22rpx;line-height: 50rpx;">
											<text v-if="Object.keys(cart.suk).length==0">默认</text>
											<text v-else class="tag" v-for="(tag,index1) in Object.values(cart.suk)"
												:key="index1">{{tag}}
												<block v-if="index1+1 < Object.values(cart.suk).length">+
												</block>
											</text>
										</view>

										<view class="u-flex u-row-between" style="margin-top: 20rpx;">
											<view class="price-1">
												￥{{cart.price}}
											</view>
											<view
												style="border:1rpx solid  #e5e5e5;line-height: 50rpx;border-radius:  25rpx;padding: 0 20rpx;height: 52rpx;">
												<u-number-box :value="cart.num" integer buttonSize="50rpx" min=1 max=100
													bgColor="#FFFFFF" @change="changeNum" :name="index">
													<view slot="minus" style="margin-right: 10rpx;">
														<u-icon name="minus" size="22rpx" color="#3d3d3d">
														</u-icon>
													</view>
													<!-- <view slot="input"
														style="font-size: 22rpx;border-left: 1rpx solid  #e5e5e5;border-right: 1rpx solid  #e5e5e5;">
														<u--input v-model="cart.num" inputAlign="center" type="number"
															customStyle="width:60rpx;height:22.5rpx;lineHeight:22.5rpx;"
															:max='100' min=0 />
													</view> -->
													<view slot="plus" style="margin-left: 10rpx;">
														<u-icon name="plus" color="#3d3d3d" size="22rpx">
														</u-icon>
													</view>
												</u-number-box>
											</view>
										</view>
									</view>
								</view>
							</view>
						</view>
					</view>
				</u-checkbox-group>
			</view>
			<view class="footer u-flex u-row-between">
				<view class="m-l-20 u-flex u-row-left">
					<u-checkbox-group placement="column" @change="checkboxChange" v-model="checkall">
						<u-checkbox activeColor="#ffbb12" :customStyle="{height: '113rpx'}" label="全选" name="all"
							shape="circle" labelSize="28rpx" size='24'>
						</u-checkbox>
					</u-checkbox-group>
					<view style="margin-left: 10rpx;">
						<u-line direction="col" length="30rpx" color="#A2A2A2" />
					</view>
				</view>

				<view>
					<view
						style="line-height: 70rpx;color: rgba(52, 53, 55, 1);letter-spacing: 0.7rpx;font-size: 29.17rpx;">
						总计:<text style="color:#E51C23;font-weight: 700;">￥{{price}}</text>
					</view>
				</view>
				<view style="margin-right: 10rpx;">
					<u-button @click="goBuy()"
						:customStyle="{backgroundColor:'#ffbb12',color:'#FFFFFF',width:'250rpx',height:'69rpx',fontWeight:'660',borderRadius:'10rpx',border:'none'}">
						去结算<text style="margin-left: 20rpx;" v-show="select.length>0">({{select.length}})</text>
					</u-button>
				</view>
			</view>
		</view>

		<view
			style="font-size: 29.17rpx;font-weight: 700;line-height: 80rpx;color: rgba(15, 15, 15, 1);text-align: center;margin-top: 80rpx;margin-bottom: 20rpx;">
			你可能还需要</view>
		<view>
			<!-- <view v-for="(item,index) in list" :key="index" class="item" @click='goDetail(item.id)'>
				<image :src="item.image" mode="widthFix"
					style="width: 100%;border-radius: 20rpx 20rpx 0 0;display: block;"></image>
				<view style="padding: 20rpx;background-color: #fff;border-radius: 0 0 20rpx 20rpx;">
					<view style='overflow: hidden;white-space: nowrap; text-overflow: ellipsis;font-size: 26rpx;'>
						{{item.storeName}}
					</view>
					<view v-if="item.del"
						style='overflow: hidden;white-space: nowrap; text-overflow: ellipsis;font-size: 24rpx;color: #666666;margin-top: 6rpx;'>
						{{item.del}}
					</view>
					<view class="label-item" v-show="item.label">
						<view class="label1" v-for="(label,index) in item.label">{{label}}</view>
					</view>
					<view style="margin-top: 10rpx;">
						<text style="color: #ee2650;font-size: 22rpx;">¥<text
								style="font-size: 32rpx;">{{item.price}}</text></text>
					</view>
					<view style="display: flex;justify-content: space-between;margin: 10rpx 0;">
						<text
							style="text-decoration: line-through;color: #898989;margin-left: 4rpx;font-size: 26rpx;">¥{{item.costPrice}}</text>
						<view style="color: #898989;font-size: 26rpx;">{{item.sales}}人购买</view>
					</view>
				</view>
			</view> -->
			<waterfall :ajax="ajax" ref="water" :bg='bg'/>
		</view>
		<view style="height: 200rpx;"></view>
	</view>
</template>
<script>
	import navbar from '@/components/baseNavbar.vue'
	import waterfall from '@/components/helang-waterfall/waterfall.vue'
	import {
		mul
	} from '@/util/bc.js'
	import {
		getConfig,
		getGroupValue
	} from "@/api/public.js"
	import priceStyle from '@/components/priceStyle.vue'
	import {
		getCartList,
		updateCart,
		deleteCart,
		deleteCartAll
	} from '@/api/storeProductCart.js'
	import {
		getProductList,
		getStoreProductListAll
	} from '@/api/storeProduct.js'
	var _self
	export default {
		components: {
			navbar,
			priceStyle,
			waterfall
		},
		data() {
			return {
				ajax: {
					// 是否可以加载
					load: true,
					// 加载中提示文字
					loadTxt: '',
					// 每页的请求条件
					limit: 20,
					// 页码
					page: 1,
					isRecommend: 1
				},
				integral: 0,
				bg:'',
				list: [],
				checkall: [],
				brokeragePrice: 0,
				animationData: {},
				show: false,
				manage: true,
				checked: true,
				loading: true,
				loadend: true,
				page: {
					page: 1,
					limit: 10,
					isRecommend: 1
				},
				cartList: [],
				select: [],
			}
		},
		computed: {
			price() {
				let price = 0;
				this.select.forEach(item => {
					let cart = this.cartList.find(i => i.id == item)
					price += mul(cart.price, cart.num)
				})

				return price.toFixed(2)
			}
		},
		onLoad() {
			_self = this;
			this.resetList()
			getConfig('product_border_image').then(res=>{
				this.bg = res.data.value
			})
		},
		onShow() {
			this.getList()
			this.checkall = []
		},
		onHide() {
			this.page.page = 1;
			this.cartList = [];
			this.select = []
			this.loadend = false;
			this.loadend = false;
		},
		methods: {
			goDetail(id) {
				uni.navigateTo({
					url: '/pages/sub/store/detail?id=' + id
				})
			},

			resetList() {
				this.ajax.page = 1
				this.getpaList()
			},
			getpaList() {
				if (!this.ajax.load) {
					return;
				}
				this.ajax.load = false;
				this.ajax.loadTxt = '加载中';
				getProductList(this.ajax).then(res => {
					this.ajax.page++
					//console.log('ddd>>>>>>>',JSON.stringify(res.data))
					this.$refs.water.addList(res.data.list)

					if (res.data.hasNextPage)
						this.ajax.loadTxt = '没有更多了';
					this.ajax.load = true
				})

			},
			toIndex() {
				uni.navigateBack(1)
			},
			changeNum(value) {
				this.cartList[value.name].num = value.value
			},
			deleteCartAll() {
				if (this.select.length == 0) {
					return uni.showToast({
						title: "请选择",
						icon: 'none'
					})
				}
				deleteCart({
					cateId: this.select.join(',')
				}).then(res => {
					this.select = []
					this.cartList = []
					this.checkall = []
					this.page.page = 1
					this.loadend = false
					this.loading = false
					this.getList()
				})
			},

			deleteCart(id, index) {
				deleteCart({
					cateId: id
				}).then(res => {
					let i = this.select.findIndex(item => item == id)
					if (i != -1) this.select.splice(i, 1)
					this.cartList.splice(index, 1)
				})
			},

			changeCart() {
				this.page.page = 1;
				this.cartList = [];
				this.select = []
				this.loadend = false;
				this.loadend = false;
				this.getList()

			},
			goBuy() {
				if (this.select.length == 0) {
					return uni.showToast({
						title: "请选择购物车",
						icon: 'none'
					})
				}
				let d = {}
				let that = this
				this.select.forEach(item => {
					let index = that.cartList.findIndex(cart => cart.id == item)
					if (index != -1) {
						d[item] = that.cartList[index].num
					}
				})

				uni.showLoading({
					title: "加载中"
				})
				updateCart({
					cateId: this.select,
					value: d
				}).then(res => {
					uni.hideLoading()
					uni.navigateTo({
						url: "/pages/sub/store/confirm?cateId=" + JSON.stringify(this.select)
					})
				}).catch(err => {
					uni.hideLoading()
				})

			},
			getList() {
				this.loading = true
				getCartList(this.page).then(res => {
					this.page.page++
					this.cartList = this.cartList.concat(res.data.list)
					this.loading = false
					if (!res.data.hasNextPage)
						this.loadend = true
				}).catch(err => {
					this.loading = false
					this.loadend = true
				})
			},
			selectChange: function(e) {
				console.log(e);
				if (e.length == this.cartList.length) {
					this.checkall = ['all']
				} else {
					this.checkall = []
				}

			},
			checkboxChange: function(e) {
				if (e.length > 0) {
					let d = []
					this.cartList.forEach(item => {
						d.push(item.id)
					})
					this.$set(this, 'select', d)
				} else {
					this.$set(this, 'select', [])
				}
			}
		},

		onReachBottom() {
			if (!this.loadend && !this.loading)
				this.getList()
		}
	}
</script>
<style lang="scss">
	page {
		background-color: #EFF0F2;
	}
</style>
<style lang="scss" scoped>
	.list-wrapper {
		column-count: 2;
		column-gap: 20rpx;
		padding: 0 20rpx;
	}

	.item {
		margin-bottom: 20rpx;
		break-inside: avoid;
	}

	.label-item {
		display: flex;
		align-items: flex-start;
		flex-wrap: wrap;

	}

	.label1 {
		font-size: 22rpx;
		color: #cc4b67;
		text-align: left;
		vertical-align: top;
		margin-top: 20rpx;
		line-height: 40.83rpx;
		border: 2rpx solid #cc4b67;
		padding: 0 10rpx;
		margin-right: 10rpx;
	}

	.footer {
		position: fixed;
		position: fixed;
		bottom: var(--window-bottom, 0);
		left: 0;
		width: 100%;
		background-color: #FFFFFF;
		z-index: 100;

		height: 113rpx;
		background: rgba(255, 255, 255, 1);
		box-shadow: 0rpx -2.08rpx 8.33rpx rgba(0, 0, 0, 0.01);
	}

	.item {
		font-size: 30rpx;
	}

	.list {
		margin: 0 20rpx;
	}

	.head {
		height: 250rpx;
		background-color: #000000;
	}

	.cart {
		margin-top: 20rpx;
		background-color: #FFFFFF;
		padding: 20rpx 0rpx;
		border-radius: 20rpx;
		padding-bottom: 70rpx;
	}

	.label {
		border: 1px solid red;
		margin-bottom: 10rpx;
		padding: 0 20rpx;
		color: red;
		border-radius: 8rpx;
		font-weight: 660;
		display: inline;
	}

	.text-1 {
		color: rgba(0, 0, 0, 1);
		letter-spacing: 0.88rpx;
		font-size: 29.17rpx;
		line-height: 40rpx;
	}

	.price-1 {
		color: rgba(203, 1, 0, 1);
		font-size: 32rpx;
		font-weight: 700;
	}
</style>
